<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 用户管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/user.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- 导航条开始 -->
		<header class="navbar navbar-expand-md navbar-light bg-light">
			<nav class="container">
				<a href="../index.html" class="navbar-brand">
					<img src="../img/logo.png" alt="Happy Go" />
				</a>
				<a href="#navbar-menu1" data-toggle="collapse" class="navbar-toggler collapsed">
					<i class="navbar-toggler-icon"></i>
				</a>

				<div id="navbar-menu1" class="navbar-collapse collapse">
					<div class="navbar-text">
						<span>Admin，</span>
						<span>欢迎来到快乐购管理页面！&nbsp;</span>
					</div>

					<div class="ml-auto">
						<ul class="navbar-nav nav">
							<li class="nav-item">
								<a href="index.html" class="nav-link">管理首页</a>
							</li>
							<li class="nav-item dropdown">
								<a href="#" data-toggle="dropdown" class="nav-link">
									<span>商品</span>
									<i class="dropdown-toggle"></i>
								</a>
								<div class="dropdown-menu">
									<a href="product-category.html" class="dropdown-item">类别管理</a>
									<a href="product.html" class="dropdown-item">商品管理</a>
								</div>
							</li>
							<li class="nav-item">
								<a href="order.html" class="nav-link">订单</a>
							</li>
							<li class="nav-item">
								<a href="user.html" class="nav-link active">用户</a>
							</li>
							<li class="nav-item">
								<a href="ads.html" class="nav-link">广告</a>
							</li>
							<li class="nav-item">
								<a href="../index.html" class="nav-link">购物首页</a>
							</li>
							<li class="nav-item">
								<a href="../login.html" class="nav-link">注销</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- //导航条结束 -->

		<!-- 页面主体部分 -->
		<div class="container mt-2">
			<div class="h4 border-bottom">
				<span>用户管理</span>
				<a href="#modal-add-user" class="btn btn-sm btn-outline-success py-0 float-right" data-toggle="modal">新增用户</a>
			</div>

			<table class="table table-sm table-hover table-striped">
				<thead class="thead-dark">
					<tr>
						<th class="d-none d-md-table-cell">#</th>
						<th>用户名</th>
						<th>姓名</th>
						<th class="d-none d-md-table-cell">性别</th>
						<th class="d-none d-md-table-cell">电话</th>
						<th class="d-none d-md-table-cell">生日</th>
						<th>角色</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="d-none d-md-table-cell user-img">
							<img src="../img/users/user_default.png" class="img-circle" />
						</td>
						<td>admin</td>
						<td>管理员A</td>
						<td class="d-none d-md-table-cell">帅哥</td>
						<td class="d-none d-md-table-cell">13999999999</td>
						<td class="d-none d-md-table-cell">2000-12-03</td>
						<td>
							<i class="glyphicon-user text-primary"></i>
							<span class="d-none d-md-inline">管理员</span>
						</td>
						<td class="dropdown" width="80">
							<button data-toggle="dropdown" class="btn btn-sm btn-outline-primary dropdown-toggle py-0">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-user" data-toggle="modal" class="dropdown-item">详细</a>
								<a href="#modal-edit-user" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">删除</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="d-none d-md-table-cell user-img">
							<img src="../img/users/user_default.png" class="img-circle" />
						</td>
						<td>master</td>
						<td>管理员B</td>
						<td class="d-none d-md-table-cell">帅哥</td>
						<td class="d-none d-md-table-cell">13888888888</td>
						<td class="d-none d-md-table-cell">2013-12-03</td>
						<td>
							<i class="glyphicon-user text-primary"></i>
							<span class="d-none d-md-inline">管理员</span>
						</td>
						<td class="dropdown" width="80">
							<button data-toggle="dropdown" class="btn btn-sm btn-outline-primary dropdown-toggle py-0">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-user" data-toggle="modal" class="dropdown-item">详细</a>
								<a href="#modal-edit-user" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">删除</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="d-none d-md-table-cell user-img">
							<img src="../img/users/user1.jpg" class="img-circle" />
						</td>
						<td>usera</td>
						<td>用户A</td>
						<td class="d-none d-md-table-cell">美女</td>
						<td class="d-none d-md-table-cell">13666666666</td>
						<td class="d-none d-md-table-cell">2012-09-08</td>
						<td>
							<span class="glyphicon-user text-muted"></span>
							<span class="d-none d-md-inline">用户</span>
						</td>
						<td class="dropdown" width="80">
							<button data-toggle="dropdown" class="btn btn-sm btn-outline-primary dropdown-toggle py-0">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-user" data-toggle="modal" class="dropdown-item">详细</a>
								<a href="#modal-edit-user" data-toggle="modal" class="dropdown-item">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger">删除</a>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<!-- 用户详细模态框部分 -->
		<div id="modal-show-user" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-zoom-in"></i>
							<span>用户详细信息</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row">
								<div class="col-md-4">
									<div class="form-group">
										<img src="../img/users/user1.jpg" class="img-thumbnail img-circle" />
									</div>
								</div>

								<div class="col-md">
									<div class="form-row">
										<label class="col-form-label pr-1">用户名：</label>
										<div class="col form-control-plaintext">usera</div>
									</div>
									<div class="form-row">
										<label class="col-form-label pr-3 mr-1">姓名：</label>
										<div class="col form-control-plaintext">用户A</div>
									</div>
									<div class="form-row">
										<label class="col-form-label pr-3 mr-1">性别：</label>
										<div class="col form-control-plaintext">美女</div>
									</div>
									<div class="form-row">
										<label class="col-form-label pr-3 mr-1">生日：</label>
										<div class="col form-control-plaintext">2012-09-08</div>
									</div>
									<div class="form-row">
										<label class="col-form-label pr-3 mr-1">角色：</label>
										<div class="col form-control-plaintext">用户</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //用户详细模态框部分结束 -->

		<!-- 新增用户模态框部分 -->
		<div id="modal-add-user" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>新增用户详细</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-user" action="" class="container-fluid">
							<div class="row">
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label pr-1">用户名：</label>
										<input type="text" class="col form-control" value="" required="required" />
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">姓名：</label>
										<input type="text" class="col form-control" value="" required="required" />
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">性别：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="sex" value="男" checked="checked" />
												<span>帅哥</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="sex" value="女" />
												<span>美女</span>
											</label>
										</div>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">生日：</label>
										<input type="date" class="col form-control" value="" />
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">角色：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="master" value="0" checked="checked" />
												<span>用户</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="master" value="1" />
												<span>管理员</span>
											</label>
										</div>
									</div>
								</div>

								<div class="col-md-4">
									<div class="form-group">
										<label>
											<input type="file" accept="image/*" hidden="hidden" />
											<img src="../img/users/user_default.png" class="img-thumbnail img-circle center-block" />
										</label>
										<div class="text-muted">*点击设置头像</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-user" type="submit">新增用户</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //新增用户模态框部分结束 -->

		<!-- 编辑用户模态框部分 -->
		<div id="modal-edit-user" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>编辑用户详细</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-user" action="" class="container-fluid">
							<div class="row">
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label pr-1">用户名：</label>
										<input type="text" class="col form-control" value="usera" required="required"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">姓名：</label>
										<input type="text" class="col form-control" value="用户A" required="required"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">性别：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="sex" value="男" checked="checked"/>
												<span>帅哥</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="sex" value="女" checked="checked"/>
												<span>美女</span>
											</label>
										</div>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">生日：</label>
										<input type="date" class="col form-control" value="2012-09-08"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">角色：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="master" value="0" checked="checked"/>
												<span>用户</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="master" value="1"/>
												<span>管理员</span>
											</label>
										</div>
									</div>
								</div>
								
								<div class="col-md-4">
									<div class="form-group">
										<label>
											<input type="file" accept="image/*" hidden="hidden"/>
											<img src="../img/users/user1.jpg" class="img-thumbnail img-circle center-block" />
										</label>
										<div class="text-muted">*点击设置头像</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-user" type="submit">更新用户</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑用户模态框部分结束 -->

		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<footer class="mt-2">
			<hr />
			<div class="container">
				<div class="row">
					<div class="col-sm my-2 d-flex justify-content-sm-end justify-content-center">
						<img src="../img/foot_img3.png" class="img-fluid rounded center-block" alt="">
					</div>
					<div class="col-sm my-2 d-flex justify-content-sm-start justify-content-center">
						<img src="../img/foot_img4.png" class="img-fluid rounded center-block" alt="">
					</div>
				</div>

				<div class="row">
					<div class="col text-center small text-muted">
						<div>Rights Reserved 免费服务热线: 400-800-0001 | 固话也可拨打: 800-000-0001 E-Mail: service@happygo.com</div>
						<div>湘ICP备10000001号 信息网络传播视听节目许可证号：1000001</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- //页面脚部部分结束 -->

	</body>

</html>
